<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i>一级</el-breadcrumb-item>
                <el-breadcrumb-item>二级</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="search">
                <el-row type="flex" :gutter="20">
                    <el-col :span="1">
                        <el-button type="success" icon="el-icon-refresh" circle @click="getData"></el-button>
                    </el-col>
                    <el-col :span="3">
                        <el-select v-model="search.state" placeholder="状态" @change="getData">
                            <el-option v-for="item in stateText" :key="item.key" :label="item.label" :value="item.key">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="2">
                        <el-button :loading="loading" type="primary" @click="searchRes" icon="el-icon-search">
                            搜索
                        </el-button>
                    </el-col>
                    <el-col>
                        <el-button :loading="loading" type="danger" @click="exportExecl" icon="el-icon-download">
                            导出
                        </el-button>
                    </el-col>
                </el-row>
                <el-row type="flex" :gutter="20">
                    <el-col :span="2" :offset="22">
                        <el-button type="primary" @click="handleEidt({id: 0})">添 加</el-button>
                    </el-col>
                </el-row>
            </div>
            <el-table :data="list" border v-loading="loading">

                <el-table-column prop="id" label="ID" align="center">
                </el-table-column>
                <el-table-column prop="title" label="标题" align="center">
                </el-table-column>
                <el-table-column prop="image" label="图片" align="center">
                    <template slot-scope="scope">
                        <el-image style="width: 100px; height: 100px" :src="scope.row.image"
                            :preview-src-list="[scope.row.image]">
                        </el-image>
                    </template>
                </el-table-column>

                <el-table-column prop="img" label="单图" align="center">
                    <template slot-scope="scope">
                        <el-image style="width: 100px; height: 100px" :src="scope.row.img"
                            :preview-src-list="[scope.row.img]">
                        </el-image>
                    </template>
                </el-table-column>

                <el-table-column prop="pic" label="单图" align="center">
                    <template slot-scope="scope">
                        <el-image style="width: 100px; height: 100px" :src="scope.row.pic"
                            :preview-src-list="[scope.row.pic]">
                        </el-image>
                    </template>
                </el-table-column>

                <el-table-column prop="content" label="内容 富文本" align="center">
                </el-table-column>
                <el-table-column prop="state" label="状态:0=关闭,1=开启" align="center">
                </el-table-column>
                <el-table-column prop="create_time" label="创建时间" align="center">
                </el-table-column>

                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-document" @click="handleEidt(scope.row)">
                            修改
                        </el-button>
                        <el-button type="text" icon="el-icon-delete" class="red"
                            @click="handleDel(scope.$index, scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page" :page-sizes="[20, 50, 100, 200]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next" :total="totalNums">
                </el-pagination>
            </div>
        </div>

        <!-- 删除提示框 -->
        <el-dialog title="删除提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button :loading="loading" type="primary" @click="delData">确 定</el-button>
            </span>
        </el-dialog>


        <!-- 编辑弹出框 -->
        <el-dialog :title="curId>0?'编辑':'添加'" :visible.sync="editVisible" width="60%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="标题">
                    <el-input v-model="form.title" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="图片">
                    <upload :isMult="false" @selectImg="showImg" :imgModel="'image'" :initData="form.image"></upload>
                </el-form-item>
                <el-form-item label="多张图片 json">
                    <upload :isMult="true" @selectImg="showImg" :imgModel="'images'" :initData="arrData.images">
                    </upload>
                </el-form-item>
                <el-form-item label="单图">
                    <upload :isMult="false" @selectImg="showImg" :imgModel="'img'" :initData="form.img"></upload>
                </el-form-item>
                <el-form-item label="多图 json">
                    <upload :isMult="true" @selectImg="showImg" :imgModel="'imgs'" :initData="arrData.imgs"></upload>
                </el-form-item>
                <el-form-item label="单图">
                    <upload :isMult="false" @selectImg="showImg" :imgModel="'pic'" :initData="form.pic"></upload>
                </el-form-item>
                <el-form-item label="多图 json">
                    <upload :isMult="true" @selectImg="showImg" :imgModel="'pics'" :initData="arrData.pics"></upload>
                </el-form-item>
                <el-form-item label="内容 富文本">
                    <editor @getContent="getContent" :initContent="form.content"></editor>
                </el-form-item>
                <el-form-item label="状态:0=关闭,1=开启">
                    <el-radio v-model="form.state" label="0">关闭</el-radio>
                    <el-radio v-model="form.state" label="1">开启</el-radio>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script type="text/javascript">
    import upload from '@/components/utils/upload';
    import editor from '@/components/utils/editor';

    export default {
        components: {

            upload,
            editor
        },

        data() {
            return {
                loading: true,
                list: [],
                page: 1,
                pageSize: 20,
                totalNums: 0,

                //当前操作对象
                curId: 0,
                curIndex: -1,
                delVisible: false,
                eidtVisible: false,

                editVisible: false,

                form: {
                    id: '',
                    title: '',
                    image: '',
                    images: '',
                    img: '',
                    imgs: '',
                    pic: '',
                    pics: '',
                    content: '',
                    state: '',
                },
                arrData: {
                    images: [],
                    imgs: [],
                    pics: [],
                },

                stateText: [{
                        key: '0',
                        label: '关闭'
                    },
                    {
                        key: '1',
                        label: '开启'
                    },

                ],
                search: {
                    state: '',
                }
            }
        },
        created() {
            this.getData();
        },

        methods: {
            //获取数据
            getData() {
                let params = {
                    page: this.page,
                    page_size: this.pageSize,
                    search: JSON.stringify(this.search),
                }
                this.loading = true;
                this.$post_('test/list', params, (res) => {
                    this.loading = false;
                    if (res.code == '0') {
                        this.list = res.data;
                        this.totalNums = Number(res.extend.totalNums);
                    } else {
                        this.$message.warning(res.msg);
                    }
                }, (res) => {
                    this.loading = false;
                    this.$message.error('出错了！')
                });
            },
            // 分页导航
            handleCurrentChange(val) {
                this.page = val;
                this.getData();
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.page = 1;
                this.getData();
            },

            //修改
            handleEidt(row) {
                this.curId = row ? row.id : 0;
                this.form = {
                    id: row ? row.id : '',
                    title: row ? row.title : '',
                    image: row ? row.image : '',
                    images: row ? row.images : '',
                    img: row ? row.img : '',
                    imgs: row ? row.imgs : '',
                    pic: row ? row.pic : '',
                    pics: row ? row.pics : '',
                    content: row ? row.content : '',
                    state: row ? row.state : '',
                }

                this.arrData.images = row.images ? JSON.parse(row.images) : [];
                this.arrData.imgs = row.imgs ? JSON.parse(row.imgs) : [];
                this.arrData.pics = row.pics ? JSON.parse(row.pics) : [];
                this.editVisible = true;
            },

            //图片处理
            showImg(imgData, isMult, imgKey) {
                if (isMult) {
                    this.arrData[imgKey] = [];
                    imgData.forEach((val) => {
                        this.arrData[imgKey].push(val);
                    })
                } else {
                    this.form[imgKey] = imgData;
                }
            },

            //获取编辑器内容
            getContent(content) {
                this.form.content = content;
            },

            // 保存编辑
            saveEdit() {
                this.loading = true;
                this.form.images = JSON.stringify(this.arrData.images);
                this.form.imgs = JSON.stringify(this.arrData.imgs);
                this.form.pics = JSON.stringify(this.arrData.pics);

                this.$post_('test/edit', this.form, (res) => {
                        this.loading = false;
                        if (res.code == 0) {
                            this.editVisible = false;
                            this.getData();
                            this.$message.success(res.msg);
                        } else {
                            this.$message.warning(res.msg);
                        }
                    },
                    (res) => {
                        this.loading = false;
                        this.$message.error('出错了！')
                    })
            },

            //删除确认
            handleDel(index, row) {
                this.delVisible = true;
                this.curId = row.id;
                this.curIndex = index;
            },
            //删除
            delData() {
                this.loading = true;
                let param = {
                    id: this.curId
                };
                this.$post_('test/del', param, (res) => {
                    if (res.code == 0) {
                        this.$message.success(res.msg);
                        this.list.splice(this.curIndex, 1);
                        this.loading = false;
                        this.delVisible = false;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            },
            //搜索
            searchRes() {
                this.page = 1;
                this.getData();
            },
            //导出
            exportExecl() {
                this.loading = true;
                let params = {
                    search: JSON.stringify(this.search),
                }
                this.$post_('test/export', params, (res) => {
                    if (res.code == 0) {
                        this.$download(res.data.url);
                    } else {
                        this.$message.error(res.msg);
                    }
                    this.loading = false;
                })
            }
        }
    }
</script>

<style type="text/css" scoped>
    .search {
        margin-bottom: 10px;
    }
</style>
